<template>
  <div class="carbon-carbon">
    <div class="main-box-carbon">
      <div class="carbonup"
        style="margin-top:15px;width:1000px;height:550px;margin-left: 40px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
        <div style="width:1000px;height:40px;background-color: steelblue">
          <span class="el-icon-s-data"
            style="color: #FFFFFF;font-size: 22px;margin-top: 8px;margin-left: 20px">CO<sub>2</sub>排放量</span>
        </div>
        <div class="flex-box-header">
          <el-form>
            <el-tag>选择年份：</el-tag>
            <el-form-item style="display: inline-block">
              <el-date-picker class="buildingleft" v-model="year" type="year" value-format='yyyy' placeholder="选择年"
                size="small">
              </el-date-picker>
            </el-form-item>
            <el-button class="form-item-inline" size="small" @click="searchYearMonth()" plain
              icon="el-icon-search">查询</el-button>
          </el-form>
          <el-form>
            <el-tag>选择查询楼宇：</el-tag>
            <el-form-item style="display: inline-block">
              <el-select v-model="value1" multiple placeholder="请选择" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                  @click.native="getBuildings(item)">
                  <!--<el-checkbox :key="item.value" v-model="item.check">{{item.label}}</el-checkbox>-->
                </el-option>
              </el-select>
            </el-form-item>
            <el-button class="form-item-inline" size="small" @click="searchBuilding()" plain
              icon="el-icon-search">查询</el-button>
          </el-form>
        </div>
        <el-descriptions title="" :column="1" direction="vertical" size="medium" :colon="false"
          style="margin-left: 30px;margin-right: 30px">
          <el-descriptions-item v-if="showValue">
            {{ schoolInformation.year }}年</el-descriptions-item>
        </el-descriptions>
        <div id="myChart4" style="width:95%;height:300px;float:left;margin-left:40px;margin-top: 20px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import MyEcharts from "../../components/Assessment";
import TanHeader from "../../components/TanHeader";
import { getCarbonLine } from "../../api/user";
import axios from "axios";
import { publicNetworkIpAndPort } from "../../api/globalVar";
export default {
  components: { TanHeader, MyEcharts },
  name: "",
  data() {
    return {
      showValue:false,
      buidingSet: new Set(),
      buildingTable: '',
      options: [],
      value1: [],
      myChart4: '',
      schoolInformation: {
        year: '',
      },
      carbonInformation: {
        year: '',
      },
      buildingName: [],
      year: '',
      building: '',
      emissionAmount: '',
      month: '',
      buildingNameName: "",
      buildingClass: [],
      mylabel: '',
      buill: '',
    };
  },
  mounted: function () {
    this.getCarbonBar();
  },
  activated() {
    this.searchYearMonth()
  },
  methods: {
    getBuildings(building) {
      this.showValue = false;//当查询具体年份的时候才显示出来左上角
      // var bui=[]
      console.log("building.label", building.label)
      // bui.push(building.label);
      // console.log("bui",bui)
      this.buidingSet.add(building.label)
      console.log("this.buidingSet", this.buidingSet)
    },
    searchBuilding() {
      let setTestValues = this.buidingSet.values()
      console.log("setTestValues", setTestValues)
      //let temp1 = setTestValues.next().value;
      var bui = []
      var n = this.buidingSet.size
      // bui.push(temp1)
      for (var i = 0; i < n; i++) {
        let temp1 = setTestValues.next().value
        bui.push(temp1);
      }
      console.log("bui", bui)
      this.buill = bui.toString()
      console.log("bui", this.buill)

      getCarbonLine({ year: this.year, buildings: this.buill }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data)
          console.log(res.data.data.length)
          this.carbonInformation = res.data.data

          console.log("this.carbonInformation", this.carbonInformation)
          //拿到所有楼宇名字 -> lagend:buildingsName
          var buildingsName = new Set();
          //将后端返回数组转成series数组，option.series = mySeries
          var mySeries = []

          //遍历后端返回数组
          for (var i = 0; i < this.carbonInformation.length; i++) {
            buildingsName.add(this.carbonInformation[i].building);
            //每个数组对象对应一个series对象
            var seriesObj = {
              name: this.carbonInformation[i].building,
              type: 'line',
              data: []
            }
            //接着将数组对象内的emissionMonthAmount数组转成seriesObj内的data数组
            for (var j = 0; j < this.carbonInformation[i].emissionMonthAmount.length; j++) {
              let curYear = this.carbonInformation[i].year
              //第一个点，让它的label显示出年份
              if (j == this.carbonInformation[i].emissionMonthAmount.length-1) {
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount],
                  label: {
                    show: true,
                    formatter: (data) => {
                      return curYear;
                    }
                  }
                })
              }
              else {//否则正常填入坐标即可
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount]
                })
              }
            }
            //折线+1
            mySeries.push(seriesObj);
          }

          console.log("this.options:", this.options)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          var option = ({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'axis',
              position: function (pt) {
                return [pt[0], '10%'];
              }
            },
            legend: {
              data: Array.from(buildingsName)
            },
            xAxis: {
              type: 'category',   // 还有其他的type，可以去官网喵两眼哦
              data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],   // x轴数据
              name: '月',   // x轴名称
              // x轴名称样式
              // nameTextStyle: {
              //   fontWeight: 600,
              //   fontSize: 18
              // }
              //data: this.xxValue
            },
            yAxis: {
              name: '',
              type: 'value',
              boundaryGap: [0, '10%']
            },
            series: mySeries,
          })

          this.myChart4.setOption(option, true);
        }
        console.log("myserise", mySeries)
      })
    },
    searchYearMonth() {
      this.showValue = true;//当查询具体年份的时候才显示出来左上角
      this.schoolInformation.year = this.year;
      //debugger
      getCarbonLine({ year: this.year, building: this.building }).then(res => {
        if (res.data.code == 200) {
          this.buidingSet = new Set(),
          this.buildingName = []
          console.log(res.data)
          console.log(res.data.data.length)
          this.carbonInformation = res.data.data

          console.log("this.carbonInformation", this.carbonInformation)
          //拿到所有楼宇名字 -> lagend:buildingsName
          var buildingsName = new Set();
          //将后端返回数组转成series数组，option.series = mySeries
          var mySeries = []

          //遍历后端返回数组
          for (var i = 0; i < this.carbonInformation.length; i++) {
            buildingsName.add(this.carbonInformation[i].building);
            //每个数组对象对应一个series对象
            var seriesObj = {
              name: this.carbonInformation[i].building,
              type: 'line',
              data: []
            }
            //接着将数组对象内的emissionMonthAmount数组转成seriesObj内的data数组
            for (var j = 0; j < this.carbonInformation[i].emissionMonthAmount.length; j++) {
              let curYear = this.carbonInformation[i].year
              //第一个点，让它的label显示出年份
              if (j == this.carbonInformation[i].emissionMonthAmount.length-1) {
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount],
                  label: {
                    show: true,
                    formatter: (data) => {
                      return curYear;
                    }
                  }
                })
              }
              else {//否则正常填入坐标即可
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount]
                })
              }
            }
            //折线+1
            mySeries.push(seriesObj);
          }

          console.log("this.options:", this.options)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          var option = ({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'axis',
              position: function (pt) {
                return [pt[0], '10%'];
              }
            },
            legend: {
              data: Array.from(buildingsName)
            },
            xAxis: {
              type: 'category',   // 还有其他的type，可以去官网喵两眼哦
              data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],   // x轴数据
              name: '月',   // x轴名称
              // x轴名称样式
              // nameTextStyle: {
              //   fontWeight: 600,
              //   fontSize: 18
              // }
              //data: this.xxValue
            },
            yAxis: {
              name: '',
              type: 'value',
              boundaryGap: [0, '10%']
            },
            series: mySeries,
          })

          this.myChart4.setOption(option, true);
        }
      })

    },
    getCarbonBar() {
      this.showValue = false;//当查询具体年份的时候才显示出来左上角
      getCarbonLine({ year: this.year, building: this.building }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data)
          console.log(res.data.data.length)
          this.carbonInformation = res.data.data

          console.log("this.carbonInformation", this.carbonInformation)
          //拿到所有楼宇名字 -> lagend:buildingsName
          var buildingsName = new Set();
          //将后端返回数组转成series数组，option.series = mySeries
          var mySeries = []

          //遍历后端返回数组
          for (var i = 0; i < this.carbonInformation.length; i++) {
            buildingsName.add(this.carbonInformation[i].building);
            
            //每个数组对象对应一个series对象
            let seriesObj = {
              name: this.carbonInformation[i].building,
              type: 'line',
              data: []
            }

            //接着将数组对象内的emissionMonthAmount数组转成seriesObj内的data数组
            for (var j = 0; j < this.carbonInformation[i].emissionMonthAmount.length; j++) {
              let curYear = this.carbonInformation[i].year
              //第一个点，让它的label显示出年份
              if (j == this.carbonInformation[i].emissionMonthAmount.length-1) {
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount],
                  label: {
                    show: true,
                    formatter: (data) => {
                      return curYear;
                    }
                  }
                })
              }
              else {//否则正常填入坐标即可
                seriesObj.data.push({
                  value: [this.carbonInformation[i].emissionMonthAmount[j].month, this.carbonInformation[i].emissionMonthAmount[j].emissionAmount]
                })
              }
            }
            //折线+1
            mySeries.push(seriesObj);
          }
          console.log("buildingsName", buildingsName)
          let k = 0;
          for (let item of buildingsName) {
            this.options.push({ label: item, value: k });
            k++;
          }
          console.log("this.options:", this.options)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          var option = ({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'axis',
              position: function (pt) {
                return [pt[0], '10%'];
              }
            },
            legend: {
              data: Array.from(buildingsName)
            },
            xAxis: {
              type: 'category',   // 还有其他的type，可以去官网喵两眼哦
              data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],   // x轴数据
              name: '月',   // x轴名称
              // x轴名称样式
              // nameTextStyle: {
              //   fontWeight: 600,
              //   fontSize: 18
              // }
              //data: this.xxValue
            },
            yAxis: {
              name: '',
              type: 'value',
              boundaryGap: [0, '10%']
            },
            series: mySeries,
          })

          this.myChart4.setOption(option, true);
        }
      })
    }

  },



}
</script>
<style>
.form-item-inline {
  display: inline-block;
  margin: 0 20px;
}

.flex-box-header {
  margin-left: 20px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  position: relative;
}

.table_two {
  margin: 16px;
  border-collapse: collapse;
}

.carbonbeijing {
  position: absolute;
  top: 55px;
  right: 60px;
  width: 100%;
  height: 100%;
  background: url(../../pic/co25.jpg);
  background-size: 100% 100%;

}

.carbon-carbon {
  width: 100%;
  background-size: 100% 100%;
}

.main-box-carbon {
  position: relative;
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
}

.left,
.carbonright {
  display: inline-block;
}

.carbonright {
  vertical-align: top;
}

.carbonon,
.carbonup {
  display: inline-block;
}

.carbonup {
  vertical-align: top;
}
</style>
